<template>
	<view id="searchBar">
		<view class="search">
			<view class="head">
				<view class="box a">
					<view class="avatar" @tap="login">
						<!-- 头像 -->
						<text v-if="token==''">登录</text>
						<image :src="imgSrc" mode="" class="image" v-else></image>
					</view>
				</view>
				<view class="box b">
					<view class="searchBox">
						<input type="text" value="" class="input" @click="searchClick" disabled="true"/>
					</view>
				</view>
				<view class="box c">
					<view class="notice">
						<view class="noticeText">
							通知
						</view>
					</view>
				</view>
				<view class="box d">
					<view class="add">
						<text class="addBtn">+</text>
					</view>
				</view>
			</view>
			<view>
				<slot></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'SearchBar',
		data() {
			return {
				username: '登录用户',
				imgSrc: '',
				token: ''
			}
		},
		props: {
			flag: {
				type: Number,
				default() {
					return 0
				}
			}
		},
		created() {
			uni.getStorage({
				key: 'login',
				success:(e) => {
					this.username = e.data.username
					this.imgSrc = e.data.imgSrc
					this.token = e.data.token
				}
			})
		},
		methods: {
			login() {
				if(this.token == '') {
					console.log(111)
					uni.getUserProfile({
						desc: '用户小程序内部信息的展示',
						lang: 'zh_CN',
						success:(info) => {
							console.log(info)
							uni.login({
								provider: 'weixin',
								success:(res) => {
									console.log(res)
									this.getLoginInfo(res,info)
								},
								fail(err) {
									console.log(err)
								}
							})
						}
					})
				}
			},
			async getLoginInfo(res,info) {
				const result = await this.$myRequest({
					url: '/schoolUser/login',
					// method: 'POST',
					data: {
						city: info.userInfo.city,
						code: res.code,
						gender: info.userInfo.gender,
						head_portrait: info.userInfo.avatarUrl || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
						nickname: info.userInfo.nickName,
						province: info.userInfo.province
					}
				})
				console.log(result)
				this.username = info.userInfo.nickName
				this.imgSrc = info.userInfo.avatarUrl
				this.token = result.data.data.token
				uni.setStorage({
					key: 'login',
					data: {
						imgSrc: info.userInfo.avatarUrl || 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
						username: info.userInfo.nickName,
						token: result.data.data.token,
						city: info.userInfo.city,
						province: info.userInfo.province,
						gender: info.userInfo.gender
					}
				})
			},
			searchClick() {
				uni.navigateTo({
					url: "../../pages/home/Search?flag=" + this.flag
				})
			}
		}
	}
</script>

<style scoped>
	.search {
		width: 93%;
		/* height: 145.45rpx; */
		background-color: #CFE4FF;
		margin: 18.18rpx auto 18.18rpx;
		border-radius: 27.27rpx;
	}
	
	.head {
		display: flex;
	}
	
	.a {
		flex: 2;
	}
	
	.b {
		flex: 6;
	}
	
	.c {
		flex: 1;
	}
	
	.d {
		flex: 1;
	}
	
	.box {
		position: relative;
	  /* display: flex; */
		height: 145.45rpx;
	}
	
	.avatar {
		width: 90.9rpx;
		height: 90.9rpx;
		background-color: #FFFFFF;
		border-radius: 50%;
		text-align: center;
		line-height: 90.9rpx;
		margin: 27.27rpx 21.81rpx;
		font-size: 25.45rpx;
	}
	
	.image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
	
	.searchBox .input {
		border-radius: 18.18rpx;
		height: 54.54rpx;
		margin: 45.45rpx 9.09rpx;
		padding: 0 10px;
		background: url(../../static/search/magnifier.png) no-repeat 95% center / 20px #FFFFFF;
	}
	
	.notice {
		width: 72.72rpx;
		height: 54.54rpx;
		background-color: #FFFFFF;
		text-align: center;
		line-height: 54.54rpx;
		margin: 45.45rpx 14.54rpx;
		border-radius: 10.9rpx;
		font-size: 25.45rpx;
	}
	
	.add {
		width: 72.72rpx;
		height: 72.72rpx;
		background-color: #62A7FF;
		color: #FFFFFF;
		font-weight: 700;
		font-size: 45.45rpx;
		text-align: center;
		line-height: 67.72rpx;
		border-radius: 50%;
		margin: 36.36rpx 14.54rpx;
	}
</style>
